<template>
  <div class="container">
    <div v-if="toggle" class="left">
      <div class="infos">
        <span>受理号:{{ caseMessage.ywh }}</span>
        <span>网上申请号:{{ caseMessage.netCode }}</span>
        <span>受理时间:{{ caseMessage.date }}</span>
        <span>承诺发件时间:{{ caseMessage.sendDate }}</span>
        <span>当前节点:{{ caseMessage.workflowNode }}</span>
        <span>业务类型:{{ caseMessage.type }}</span>
      </div>
      <el-tabs v-model="store.activeTab" type="border-card" class="tabs">
        <el-tab-pane v-for="item in tabs" :key="item.name" :label="item.title" :name="item.name">
          <component
            :is="item.content"
            :name="item.name"
            :transactionId="transactionId"
          ></component>
        </el-tab-pane>
      </el-tabs>
      <div class="buttons">
        <el-button type="primary" v-for="btn in buttons" :key="btn.name">{{ btn.name }}</el-button>
      </div>
    </div>
    <div v-else class="left">
      <div class="infos">
        <span>受理号:{{ caseMessage.ywh }}</span>
        <span>网上申请号:{{ caseMessage.netCode }}</span>
        <span>受理时间:{{ caseMessage.date }}</span>
        <span>承诺发件时间:{{ caseMessage.sendDate }}</span>
        <span>当前节点:{{ caseMessage.workflowNode }}</span>
        <span>业务类型:{{ caseMessage.type }}</span>
      </div>
      <el-tabs v-model="store.activeTab" type="border-card" class="tabs">
        <el-tab-pane v-for="item in tabs" :key="item.name" :label="item.title" :name="item.name">
          <component
            :is="item.content"
            :name="item.name"
            :transactionId="transactionId"
          ></component>
        </el-tab-pane>
      </el-tabs>
      <div class="buttons">
        <el-button type="primary" v-for="btn in buttons" :key="btn.name">{{ btn.name }}</el-button>
      </div>
    </div>
    <div v-if="toggle" class="right">
      <div @click="onToggle" class="materialBtn"><a>折叠材料>></a></div>
      <materialTab :transactionId="transactionId" name="materialTab"></materialTab>
    </div>
    <div v-else class="right-0">
      <div @click="onToggle" class="materialBtn-0"><a>&lt;&lt;展开材料</a></div>
      <materialTab :transactionId="transactionId" name="materialTab"></materialTab>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useBizStore } from '@/store/modules/biz'
import materialTab from '@/views/tabs/materialTab/index.vue'
import { v4 } from 'uuid'
const route = useRoute()
const toggle = ref(true)
const typebCode = route.meta.typebCode
const transactionId = v4()
const store = useBizStore(typebCode)()
const caseMessage: any = computed(() => {
  return store.caseMessage
})
onMounted(() => {
  store.preload({ typebCode })
  store.load({ transactionId, typebCode })
})
const tabs = computed(() => {
  return store.tabs
    .filter((it: any) => it.name != 'materialTab')
    .map((it: any) => {
      it.content = shallowRef(
        defineAsyncComponent(() => import(`@/views/tabs/${it.name}/index.vue`)),
      )
      return it
    })
})
const buttons = computed(() => {
  return store.buttons.map((it: any) => {
    return it
  })
})

const onToggle = () => {
  toggle.value = !toggle.value
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
}
.left {
  display: flex;
  flex: 1;
  min-height: calc(100vh - 84px);
  flex-direction: column;
}
.right {
  display: flex;
  flex: 1;
  min-height: calc(100vh - 84px);
  flex-direction: column;
}
.right-0 {
  display: flex;
  width: 0;
  min-height: calc(100vh - 84px);
  flex-direction: column;
}
.infos {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 5px 10px;
}

.infos span {
  padding-right: 14px;
}

.tabs {
  flex: 1;
}
.buttons {
  height: 50px;
  background-color: #f5f7fa;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 50px;
}

.materialBtn {
  margin-top: 10px;
  margin-left: 15px;
  margin-bottom: -10px;
  color: var(--el-color-primary);
}

.materialBtn-0 {
  margin-top: 10px;
  margin-left: -100px;
  margin-bottom: -10px;
  color: var(--el-color-primary);
}
</style>
